<template>
  <!-- 人员模板库管理 -->
  <el-main class="vertical">
    <el-container style="height:55%;">
      <basic-crud ref="topCrudRrf" :option="option" businessUrl="/mes/allotSchemaController" class="curdTop"
                  selectType="multiple"
                  @current-row-change="handleCurrentRowChange" @selection-change="selectionChangeHandler">
        <template #menu-left>
          <el-button icon="Plus" type="primary" @click="addClickHandler">新增</el-button>
          <el-button icon="Delete" plain type="danger" @click="delClickHandler">删除</el-button>
          <el-button icon="DocumentCopy" plain type="primary" @click="cloneClickHandler">克隆</el-button>
        </template>
        <template #menu>
          <el-button icon="edit" type="text" @click="editClickHandler">编辑</el-button>
        </template>
      </basic-crud>
    </el-container>

    <el-container style="height:45%">
      <basic-crud ref="bottomCrudRef" :apiListParams="listPatrams" :autoLoad="false" :option="bottomOption"
                  :permission="getPermission" apiGetListUrl="/mes/allotSchemaController/listSchemaItemHasChildren"
                  class="curdBottom">
      </basic-crud>
    </el-container>

    <add-person-tem ref="addPersonTemRef"></add-person-tem>
  </el-main>

</template>

<script setup>
import {computed} from "vue";
import AddPersonTem from './addPersonTem.vue'; // 正确导入

const bottomHeight = ref((document.body.clientHeight - 120) * 0.45 - 75);//0.45是父容器的高度设为45%
import {deleteDel} from "../../../apis/personnel/personTemplate"

const option = ref({
  highlightCurrentRow: true,
  size: 'small',
  calcHeight: bottomHeight.value + 95,
  statusBtn: true,
  addBtn: false,
  viewBtn: false,
  multiple: true,
  editBtn: false,
  menuWidth:180,
  column: [
    {
      label: "方案名称",
      prop: "name",
      search: true,
      sortable: true,
    },
    {
      label: "产品型号",
      prop: "modelName",
      search: true,
      sortable: true,
    },
    {
      label: "产品名称",
      prop: "pdmProductName",
      sortable: true,
    },
    {
      label: "规程编号",
      prop: "specificationCode",
      sortable: true,
      search: true,
    },
    {
      label: "规程名称",
      prop: "specificationName",
      sortable: true,
      search: true,
    },
    {
      label: "规程版本",
      prop: "specificationRev",
      sortable: true,
      width: 90,
    },
    {
      label: "状态",
      prop: "statusShow",
      sortable: true,
      width: 80,
      slot: true,
    },
  ],
});

const bottomOption = ref({
  highlightCurrentRow: true,
  height: bottomHeight.value,
  size: 'small',
  isTableTree: true,
  delBtn: false,
  menuWidth: 170,
  addBtn: false,
  viewBtn: false,
  column: [
    {
      label: "工步号",
      prop: "code",
    },
    {
      label: "工步名称",
      prop: "name",
    },
    {
      label: "操作者",
      prop: "workerName",
      width: 200,
      labelWidth: 140,
      slot: true,
      formslot: true,
    },
    {
      label: "检验员",
      prop: "checkerName",
      width: 200,
      labelWidth: 140,
      slot: true,
      formslot: true,
    },
    {
      label: "是否固定军检",
      prop: "fixedArmyFlag",
      width: 200,
      type: "select",
      labelWidth: 140,
      virtualize: true,
      dicData: [
        {
          label: "是",
          value: "true",
        },
        {
          label: "否",
          value: "false",
        },
      ],
      formatter: function (d) {
        if (d.fixedArmyFlag == "true") {
          return "是";
        } else if (d.children && d.children.length > 0) {
          return "";
        } else if (d.fixedArmyFlag == "false") {
          return "否";
        } else {
          return "";
        }
      },
    },
  ],
});

// 上方当前行数据
const currentRow = ref({})

// 下方表格参数
const listPatrams = computed(() => {
  return {
    allotSchemaId: currentRow?.value?.id || null
  }
});

// 上方表格行单击事件
const handleCurrentRowChange = (row) => {
  currentRow.value = row
};

const selectList = ref([])
// 选择框change事件
const selectionChangeHandler = (row) => {
  selectList.value = row;
};

const addPersonTemRef = ref(null)
// 上方表格新增事件
const addClickHandler = () => {
  addPersonTemRef.value.openDialog();
};

const topCrudRrf = ref(null)
const bottomCrudRef = ref(null)
// 上方表格删除事件
const delClickHandler = () => {
  if (selectList.value.length <= 0) {
    return ElMessage.warning('至少选择一条数据！')
  }
  ElMessageBox.confirm(
      '此操作将永久删除数据, 是否继续?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        const ids = selectList.value.map(item => item.id).join(',');
        deleteDel(ids).then(res => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          topCrudRrf.value.getList();
          bottomCrudRef.value.tableData = [];
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消操作',
        })
      })
};

const cloneClickHandler = () => {
  addPersonTemRef.value.openDialog();
};
const editClickHandler = () => {
  addPersonTemRef.value.openDialog();
};
const getPermission = (key, row) => {
  if (key === 'editBtn' && !row.parentId) {
    return false;
  }
  return true;
};
</script>

<style lang="scss" scoped>

</style>
